<template>
    <div class="updateMember">
        <el-dialog title="升级会员" :visible.sync="addFormVisible" @close="closeDialog"   center>
			<el-form :model="addForm" label-width="80px"  ref="addForm" label-position="left" inline>
                <el-col :span=24>
					<el-col :span="12">
						<el-form-item label="会员级别" prop="level" width="100px">
							<el-select v-model="addForm.level" placeholder="请选择" @change="levelChange" >
								<el-option
									v-for="item in levelOptions"
									:key="item.code"
									:label="item.name"
									:value="item.id"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="缴费方式" prop="payMode" label-width="80px">
							<el-select v-model="addForm.payMode" placeholder="请选择"  :allow-create="true">
								<el-option
									v-for="item in payModeOptions"
									:key="item.value"
									:label="item.label"
									:value="item.value"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-col>

				<!-- <el-col :span=24>
					<el-col :span="12">
                            <el-form-item label="是否已缴清费用" prop="status" label-width="400px" >
							<el-radio-group v-model="addForm.status" :disabled="receivedChangeFlag">
								<el-radio class="radio" :label="1">是</el-radio>
								<el-radio class="radio" :label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="已缴费用" prop="received" v-if="addForm.status==2">
							<el-input v-model="addForm.received" :disabled="receivedChangeFlag"></el-input>
						</el-form-item>
					</el-col>
				</el-col> -->
			</el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="updateMember">升级会员</el-button>
			</div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name:'updateMember',//升级会员
    data() {
        return {
            initPayMode:'',//初始状态的缴费方式
            addFormVisible:false,//弹窗的显示
            payModeFlag:false,
            receivedChangeFlag:false,
            id:'',
            vipId:'',
            addForm:{
                level:'',//会员等级
                payMode:'',//缴费方式
                status:'',//是否已经缴清
                received:'',//已缴费用
                levelNum:''//会员当前的等级索引
            },
            levelOptions:'',
            //会员缴费方式
			payModeOptions:[
                {label:'免费',value:0},
				{label:'一次性',value:1},
				{label:'分期',value:2}
            ],

        }
        
    },
    methods: {
        async getUserVipRule(){
            //获取会员等级&缴费规则接口
            const data=await this.$api.getUserVipRule();
            if(data.data.level=='success'){
                let list= data.data.data.vip_list;
                this.levelOptions=list;

            }
        },
        levelChange(e){
               //选中会员等级，更改相应缴费方式
            this.addForm.payMode='';//重置缴费方式
            const rule=this.levelOptions.find(val=>{
                return val.id==e
            })
            //一次性不能转为分期
            
			const list=rule.pay_rule_list;
			this.payModeOptions=list.map((item)=>{
				return {label:item.type_name,value:item.id}
			})

          },
          async showDialog(id,vipId){
            this.addFormVisible=true;
            this.id=id;
            this.vipId=vipId;
            await this.getUserVipRule();
            this.getUserVipDetail();
		},
          closeDialog(){
              //关闭弹窗重置数据
              this.addFormVisible=false;
              this.payModeFlag=false;
                this.receivedChangeFlag=false;
                this.id='';
                this.vipId='';
                this.addForm.received='';
                this.addForm.level='';
                this.addForm.payMode='';
                this.addForm.status='';
                this.addForm.levelNum='';//会员当前的等级索引

          },
          async getUserVipDetail(){
               const data=await this.$api.getUserVipDetail({
                id:this.id,
                vipId:this.vipId
            });
            if(data.data.level=='success'){
                setTimeout(()=>{
                    let memberDetail=data.data.data.user_vip_info;
                this.addForm.received=memberDetail.received;
                this.addForm.level=+memberDetail.vip_rule_id;
                this.levelChange(this.addForm.level);
                this.initPayMode=+memberDetail.pay_id;//初始状态的缴费方式
                this.addForm.payMode=+memberDetail.pay_id;
                this.addForm.status=+memberDetail.pay_status;
                this.addForm.levelNum=memberDetail.vip_level;//会员当前的等级索引      
                this.initRule()       
                },100)
                
            }else{
                this.$message({
                    type:'error',
                    message:data.data.message
                })
            }
          },
          initRule(){
              //筛选当前级别以上的会员级别
              const rule=this.levelOptions;
                const levelNow=this.addForm.levelNum;//当前会员级别
               const newRule= rule.filter(item=>{
                   if(item.level>=levelNow){
                       return item
                   }
                    
                })
                this.levelOptions=newRule
          },
          async updateMember(){
            //   
              //升级会员
              const res=await this.$api.getUserVipUpgrade({
                  id:this.id,
                  vipId:this.vipId,
                  vipCode:this.addForm.level,
                  payMode:this.addForm.payMode,
                  status:this.addForm.status
              })
              if(res.data.level=='success'){
                    this.$message({
                        message: res.data.message,
                        type: 'success'
                        });
                        this.$emit('update')
                    this.addFormVisible=false;
                }else{
                    this.$message({
                    message: res.data.message,
                    type: 'error'
                    });
                }
             
          }
    },
    mounted() {
        
    },
}
</script>